<template>
  <div class="container">
    <div class="app-container">
      <el-card class="el-card-body">
        <!-- 搜索框 -->
        <el-form>
          <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="10" style="padding-left: 20px">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据编号搜索"
                  style="width: 220px"
                  size="small"
                  v-model="key"
                  @change="btnSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-form-item>
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="btnSearch"
                >搜索</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>

        <!-- 消息提示 -->
        <el-alert
          type="info"
          show-icon
          :closable="false"
          :title="`数据一共${page.counts}条`"
        >
        </el-alert>

        <!-- 表格 -->
        <el-table :data="list" v-loading="loading">
          <el-table-column label="编号" width="220px" prop="id">
          </el-table-column>
          <el-table-column
            label="题型"
            width="80px"
            :formatter="formatterType"
            prop="questionType"
          >
          </el-table-column>
          <el-table-column label="题目编号" width="220px">
            <template v-slot="{ row }">
              <el-link
                type="primary"
                v-for="item in row.questionIDs"
                :key="item.number"
                :underline="false"
                @click="getDetail(item)"
              >
                {{ item.number }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180px" prop="addTime">
          </el-table-column>
          <el-table-column label="答题时间(s)" prop="totalSeconds">
          </el-table-column>
          <el-table-column label="正确率(%)" prop="accuracyRate">
          </el-table-column>
          <el-table-column label="录入人" prop="userName"> </el-table-column>
          <el-table-column label="操作" width="80px">
            <template v-slot="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="btnDel(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            layout="prev, pager, next,sizes,jumper"
            :total="page.counts"
            :page-size="page.pagesize"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            background
            :page-sizes="[20, 30, 50, 100]"
          >
          </el-pagination>
        </el-row>
        <!-- 试题预览弹出框 -->
        <Preview ref="preview" :showDialog.sync="showDialog"></Preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from "@/api/hmmm/questions"
import { questionType } from "@/api/hmmm/constants"
import Preview from "../components/questions-preview.vue"
export default {
  components: {
    Preview,
  },
  data() {
    return {
      list: [],
      page: {
        counts: 0,
        page: 1,
        pagesize: 20,
        keyword: "",
      },
      key: "",
      showDialog: false,
      questionType,
    }
  },
  created() {
    this.randoms()
  },
  methods: {
    async randoms() {
      this.loading = true
      const { data } = await randoms(this.page)
      this.list = data.items
      this.page.counts = +data.counts
      this.page.pagesize = +data.pagesize
      // console.log(data);
      this.loading = false
    },
    // 传递请求需要得参数给子组件
    getDetail(item) {
      this.$refs.preview.getDetail(item)
      this.showDialog = true
      console.log(item)
    },
    // 格式化题型
    formatterType(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value == cellValue)
      return obj ? obj.label : "未知"
    },
    async handleCurrentChange(newPage) {
      this.list = []
      this.page.page = +newPage
      this.loading = true
      await this.randoms()
      document.documentElement.scrollTop = 0
      this.loading = false
    },
    async btnDel(row) {
      await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      await removeRandoms(row)
      await this.randoms()
      this.$message.success("删除成功")
    },
    btnSearch() {
      this.page.keyword = this.key
      this.randoms()
    },
    clear(){
      this.key = ""
      this.randoms()
    }
  },
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
}
</style>
